import { useEffect, useRef } from 'react';
import FormStorage from '../utils/FormStorage';

/**
 * 这是一个用于存储表单的钩子。它使用localStorage和BroadcastChannel来同步不同标签页之间的表单数据，并防止数据丢失。
 *
 * @param {String} formId - 表单的唯一标识符。
 * @param {Object} formData - 需要被存储的表单数据。
 * @param {Function} setFormData - 设置表单数据的函数。
 * @return {Object} 返回一个FormStorage实例，该实例包含了表单数据、保存数据的方法以及清除数据的方法等。
 */
const useFormStorage = (formId, formData, setFormData) => {
  // 创建一个持久化的 FormStorage 实例
  // new FormStorage(formId, { value: formData })
  const formStorage = useRef(new FormStorage(formId, formData)).current


  useEffect(() => {
    // 初始化formStorage数据
    formStorage.init();
    // 设置表单数据
    // setFormData({ ...formStorage.formData.value });
    setFormData({ ...formStorage.formData })

    const syncFormData = (event) => {
      if (event.key === formStorage.storageKey && event.newValue) {
        setFormData(JSON.parse(event.newValue))
      }
    }
    // 添加一个 storage 事件监听器，当本地存储中的表单数据发生变化时，更新组件状态。
    window.addEventListener('storage', syncFormData)
    // 返回一个清理函数，移除事件监听器。
    return () => {
      window.removeEventListener('storage', syncFormData)
    }
  }, [formStorage, setFormData])


  // 保存表单数据。每当 formData 变化时，更新 formStorage 中的数据并调用防抖后的 debouncedSaveData 方法保存数据。
  useEffect(() => {
    formStorage.formData = formData;
    formStorage.debouncedSaveData();
  }, [formStorage, formData])

  // 返回 formStorage 实例，以便在其他地方可以访问或操作它。
  return formStorage;
}

export default useFormStorage;